// import Plyr from "plyr"
// import type PlyrType from 'plyr'
// import "plyr/dist/plyr.css"
// import { ref, isRef, onMounted, onUnmounted type Ref } from 'vue'

// export const plyrInstance = ref<PlyrType>()
// export const isPlaying = ref<boolean>(false)
// export const isEnded = ref<boolean>(false)

// export const usePlyr = async (el: HTMLDivElement | Ref<HTMLDivElement>, config?: PlyrType.Options) => {
//     if (!el) {
//         throw new Error('El Option Must Be HTML Element !')
//     }
//     interface usePlyrRes {
//         isPlaying: typeof isPlaying
//         isEnded: typeof isEnded
//         plyrInstance: typeof plyrInstance
//     }
//     return new Promise<usePlyrRes>((resolve, reject) => {
//         onMounted(() => {
//             if (!el) {
//                 reject('Can Not Found Target Element Please Setup In OnMounted Function!')
//             }
//             try {
//                 plyrInstance.value = new Plyr(isRef(el) ? el.value : el, config)
//                 //init evnet
//                 plyrInstance.value.on("playing", () => {
//                     isPlaying.value = true
//                     isEnded.value = false
//                 })
//                 plyrInstance.value.on("pause", () => {
//                     isPlaying.value = false
//                     isEnded.value = false
//                 })
//                 plyrInstance.value.on("ended", () => {
//                     isEnded.value = true
//                     isPlaying.value = false
//                 })
//                 onUnmounted(() => {
//                     plyrInstance.value?.destroy()
//                 })

//                 resolve({ plyrInstance, isPlaying, isEnded })
//             } catch (err) {
//                 reject(null)
//             }
//         })
//     })
// }


import { ref } from 'vue'
import type PlyrType from 'plyr'

export const plyrInstance = ref<PlyrType>()